<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script>

    //AJAX分为四步
    //1，创建XMLHttpRequest对象
    //向服务器发送请求
    //2， 名字点open（’method（GET或POST）'，'URL(文件在服务器上的位置)'，‘async（true（异步）或false（同步））’）
    //3，名字点send（string（仅用于POST请求））
    //  4，接受请求
    // 主要是判断浏览器和服务器的交互进度和结果


    //XMLHttpRequest是AJAX的基础
    //创建XMLHttpRequest对象
    //为了应对所有的现代浏览器，包括ie5和ie6，请检查浏览器是否支持XMLHttpRequest对象。
    // 如果支持，则创建hXMLHttpRequest.
    //如果不支持则创建ActiveXObject;
    let xhr;
    //XMLHttpRequest 对象用于和服务器交换数据。
    if (window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }else {
        xhr = new ActiveXObject("microsoft.XMLHTTP");
    };
    // xhr.uuu=function() {
    //XMLHttpRequest请求状态，0：请求未初始化  1：服务器连接已建立  2：请求已接收  3：请求处理中  4：请求已完成，响应已就绪
    //HTTP状态码：200-服务器成功返回网页   404—请求的网页不存在  5.3-服务器暂时不可用
    //     if (xhr.readyState==4 && xhr.status==200)
    //     {
    //         //responseText属性返回字符串形式的响应
    //         document.getElementById("ppp").innerHTML=xhr.responseText;
    //     }
    // };
    // OPEN三个参数 规定请求的类型、URL 以及是否异步处理请求。
    //1，method：请求的类型；GET 或 POST
    //2，url：文件在服务器上的位置
    //3，async：true（异步）或 false（同步）
    //发送请求，，将请求发送到服务器
    //XMLHttpRequest对象的oppn（）和send（）方法
    xhr.open('GET','http://www.tianqiapi.com/api?version=v9&appid=59779436&appsecret=hdNKJO16');
    //发送请求
    xhr.send();
    //接受请求
    //接收返回
    //0 （未初始化）还没有调用open方法
    //1 （载入）已经调用send（）方法，正在发送请求
    //2（载入完成）已收到全部响应内容
    //3（解析）正在解析响应内容
    //4（完成）响应内容解析完成，可以在客户端调用
    xhr.onreadystatechange=function(){
        //oAjax.readyState浏览器和服务器的交互情况
        if(xhr.readyState === 4)//读取完成
        {
            if(xhr.status===200)//http状态码,用来判断是否成功接受并返回文件
            {
                return xhr.status+" Success" +xhr.responseText;//读取响应文件里面的TEXT
            }else{
                return  xhr.status+" NotFound"
            }
        }
    };


    //GET与POST，GET更简单也更快，并且大部分情况下都能用
    //在以下情况中，请使用 POST 请求：
    //无法使用缓存文件（更新服务器上的文件或数据库）
    //向服务器发送大量数据（POST 没有数据量限制）
    //发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
    //POST请求
    // xhr.open("POST","/try/ajax/demo_post.php");
    // xhr.send();

    fetch('http://www.tianqiapi.com/api?version=v9&appid=59779436&appsecret=hdNKJO16')
        .then(function (response) {
            return response.text()
        })
        .then(function (text) {
            console.log(JSON.stringify(text))
        })
</script>
</html>